<template>
  <div class="users">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>用户列表</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >添加用户</el-button
        >
      </div>
      <!-- 标题 -->
      <!-- 筛选内容 -->
      <div class="search">
        <el-input
          placeholder="请输入用户名"
          v-model="uname"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-date-picker
          v-model="data"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <!-- 筛选内容 -->
      <!-- 表格内容 -->
      <el-table :data="tableDate"
        ><el-table-column label="编号" prop="id" width="60px">
        </el-table-column>
        <el-table-column label="所属角色" prop="rolename"> </el-table-column>
        <el-table-column label="用户名" prop="uname"> </el-table-column>
        <el-table-column label="手机号" prop="mobile"> </el-table-column>

        <!--
         <el-table-column label="冻结" prop="status"> </el-table-column> 
        调用列组件，默认的状态满足不了 需要自定义超文本
        使用插槽
        v-model='value'
        思考：value模型中有没有
        回答：没有
        解决：去模型中定义value
        思考：这个value属于第一行还是第二行
        回答：不知道 因此要分开存
        解决：存数组 value[index]
        但是：没有for循环
        解决：使用【作用域插槽】
        汉化：使用组件中的数据

        明确：使用elementui的时候 可以利用【作用域插槽 获取当前行数据】
        语法：<template slot-scope='scope'></template>
        语法：<template slot-scope='item'></template>
        语法：item.row 代表当前行对象
        语法：item.row.键 可以获取当前行每一列的值
        
        -->
        <el-table-column label="冻结">
          <template slot-scope="item">
            <el-switch
              v-model="item.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="创建于" prop="created_at"> </el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-table-column>
      </el-table>
      <!-- 表格内容 -->
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
      <!-- 分页 -->
    </el-card>
    <!-- 卡片 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 分页
      pagenum: 1,
      // 搜索
      uname: "",
      data: [],
      //表格数据
      tableDate: [
        {
          id: 1,
          rolename: "绿乌龟",
          uname: "小次郎1",
          mobile: "12345678",
          status: true,
          created_at: "2019-3-3 ",
        },
        {
          id: 2,
          rolename: "绿乌龟",
          uname: "小次郎2",
          mobile: "12345678",
          status: true,
          created_at: "2019-3-3 ",
        },
        {
          id: 3,
          rolename: "绿乌龟",
          uname: "小次郎3",
          mobile: "12345678",
          status: true,
          created_at: "2019-3-3 ",
        },
        {
          id: 4,
          rolename: "绿乌龟",
          uname: "小次郎4",
          mobile: "12345678",
          status: false,
          created_at: "2019-3-3 ",
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.users {
  width: 100%;
  height: 100%;
  .el-card {
    width: 96%;
    margin: auto;
    .search {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      .el-input {
        width: 300px;
      }
    }
    .el-pagination {
      width: 100%;
      padding: 10px 0;
      background: #ebeef5;
      text-align: right;
      margin-top: 10px;
      padding-right: 10px;
      box-sizing: border-box;
    }
  }
}
</style>
